<template>
  <div class="photoPage">
    <!-- <div class="photoTitle">照 片 墙</div> -->
    <div class="photoBox">
      <div class="swiper_box" @mouseover="stop()" @mouseout="start()">
      	<button class="btn top" type="button" @click="bottomFn()">上一张</button>
      	<div class="imgs" id="swiper">
      		<img class="img" :src="item.src" v-for="(item,index) in swiperImgList"/>
      	</div>
      	<button  class="btn bottom" type="button" @click="topFn()">下一张</button>
      </div>
      <div class="photo">
      	<img class="img" :src="imgList[curIndex].src" >
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        flag:false,
        timer:null,
        curIndex:0,
        imgList: [
          {src:require('../assets/img/1.jpg'),name:'1.jpg'},
          {src:require('../assets/img/2.jpg'),name:'2.jpg'},
          {src:require('../assets/img/3.jpg'),name:'3.jpg'},
          {src:require('../assets/img/4.jpg'),name:'4.jpg'},
          {src:require('../assets/img/5.jpg'),name:'5.jpg'},
          {src:require('../assets/img/6.jpg'),name:'6.jpg'},
        ],
        swiperImgList:[],
      };
    },
    mounted() {
      this.init();
    },
    methods: {
      init(){
      	const length=this.imgList.length;
      	const preList=this.imgList.slice(length-2,length);
      	const imgList=this.imgList;
      	this.swiperImgList=preList.concat(imgList,imgList);
      	this.start();
      },
      start(){
      	this.run(this.curIndex);
      	this.timer=setInterval(()=>{
      		this.topFn();
      	},3000)
      },
      stop(){
      	clearInterval(this.timer);
      },
      toIndex(index){
      	this.run(index);
      },
      topFn(){
      	this.run(this.curIndex+1);
      },
      bottomFn(){
      	this.run(this.curIndex-1);
      },
      run(moveIndex){
      	//防止执行时间内多次点击
      	if(this.flag)return;
      	this.flag=true;
      	if(moveIndex == undefined){
      		moveIndex=this.curIndex;
      	}
      	const moveHeight=180;
      	const duration=800//滑动动画时长
      	const length=this.imgList.length;
      	const ul=document.querySelector("#swiper");

      	ul.style.transition="all "+duration+"ms";
      	ul.style.top=-(moveHeight * 2 + moveHeight * moveIndex)+'px';
      	console.log(moveIndex,ul.style.top)
      	setTimeout(()=>{
      		this.flag=false;
      		if(moveIndex<0){
      			moveIndex=length-1;
      			ul.style.transition="noe";
      		}
      		if(moveIndex==length){
      			moveIndex=0;
      			ul.style.transition="noe";
      		}
      		ul.style.top=-(moveHeight * 2 + moveHeight * moveIndex)+'px';
      		this.curIndex=moveIndex;
      	},duration)

      }
    }
  }
</script>

<style lang="scss" scoped>
  .photoPage {
    width: 100%;
    height: 100%;
    background: -webkit-radial-gradient(bottom, #270348 -30%, #000000);

  }
  .photoBox{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0 auto;
  }
  .swiper_box {
  	position: absolute;
    left: 50px;
  	height: 100%;
  	width: 300px;
  	overflow: hidden;
  }
  .swiper_box .btn {
  	position: absolute;
  	z-index: 10;
  	left:50%;
  	margin-left: -50%;
  	width: 100%;
  	font-size: 18px;
  	color:#FFF;
  	background: rgba(0,0,0,0.5);
  	border: none;
  	cursor: pointer;
    outline: none;
  }
   .swiper_box .btn:hover{
     background: rgba(0,0,0,0.5);
   }
  .swiper_box .btn.top {
  	top: 20px;
  }
  .swiper_box .btn.bottom {
  	bottom: 20px;
  }
  .swiper_box .imgs {
  	position: absolute;
  	z-index: 1;
  	font-size:0 ;
  }

  .imgs .img {
  	width: 100%;
  	height: 180px;
    border: 4px solid #ffffff;
    box-sizing: border-box;
    margin: 5px 0;
  }

  .photo{
  	position:relative;
  	height: 100%;
  	margin-left: 350px;
  	padding:50px 100px;
  	font-size:0 ;
  	box-sizing: border-box;
  }
  .photo .img{
  	width: 100%;
  	height: 100%;
    border: 4px solid #ffffff;
    box-sizing: border-box;
  }
</style>
